import React, { useEffect,memo } from 'react'
import { connect } from 'react-redux'
import { useLocation, useParams } from 'react-router-dom';
import * as actionTypes from './store/actionCreators'
import HeaderComponent from '@/common/headerComponent/HeaderComponent'

function Detail(props) {
    const {detailData,getDetailData}=props
    console.log(detailData)
    // let path=useParams()
    let {pathname}=useLocation()
    // let id=pathname.replace('/detail/','') || undefined;
    let id=1
    console.log(history)
    useEffect(()=>{
        if(id){
            getDetailData(id)
        }
    },[])

    const handleShare=()=>{
        // to be continue
    }

    return (
        <div>
            <HeaderComponent title={detailData.title} handleShare={handleShare} />
        </div>
    )
}

const mapStateToPorps=(state)=>{
    return {
        detailData:state.detail.detailData
    }
}

const mapStateToDispatch=(dispatch)=>{
    return {
        getDetailData(id){
            dispatch(actionTypes.getDetailData(id))
        }
    }
}

export default connect(mapStateToPorps,mapStateToDispatch)(memo(Detail))
